<template>
    <view class="application">
    <view style="position: fixed; z-index: 99;background-color: #fff;">
        <view><uni-status-bar></uni-status-bar></view>
        <view class="search-box flex-cn" @click="backHome">
          <view class="navbar-left flex-cn" style="flex: 1" >
            <view
              style="width: 100rpx; text-align: center"
              class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"
            ></view>
          </view>
          <view
            style="
              height: 80rpx;
              line-height: 80rpx;
              font-size: 36rpx;
              font-family: '.PingFang SC, PingFang SC';
              display: flex;
              justify-content: center;
              align-content: center;
              flex: 1;
              color: #000;
              font-weight: 600;
            "
          >
            供应商申请
          </view>
          <view style="width: 320rpx; flex: 1"></view>
        </view>
      </view>

      <view class="header">
        <text style="font-size: 40px">供应商合作申请</text>
        <!-- <text style="margin: 5px 0;font-size: 14px;display: inline-block;">咨询热线：181-2096-2781（工作日 09:00 ~ 18:00）</text> -->
        <view class="link-container">
          <text style="color: white; text-decoration: none"
            >电脑申请,体验更佳 sems.pupumall.com</text
          >
          <text @click="copyLink" style="margin-left: 10px">复制</text>
        </view>
      </view>
      <view class="info">
        <text
          >不了解合作要求？<a href="#">点击查询供应品类的准入要求</a
          >，如自查符合要求，可提前准备材料后快速申请合作</text
        >
      </view>
  
      <view class="steps">
        <view class="step" v-for="step in steps" :key="step.number">
          <view class="step-number">{{ step.number }}</view>
          <view class="step-content">
            <view style="font-size: 16px;color: #4caf50;font-weight: bold;">{{ step.title }}</view>
            <text style="font-size: 15px; font-weight: bold">{{
              step.description
            }}</text>
          </view>
        </view>
      </view>
  
      <view style="height:100px;"></view>
      <view class="footer">
        <view class="icons">
          <view class="icon">
            <text class="feiIconfont icon-tubiao_touxiangkuang" style="font-size: 24px;"></text>
            <text>咨询</text>
          </view>
          <view class="icon" @click="handlerProblem">
            
            <text class="feiIconfont icon-changjianwentixiangguanwenti" style="font-size: 24px;"></text>

            <text >常见问题</text>
          </view>
        </view>
        <button class="apply-button" @click="handlerApply">立即申请</button>
      </view>

      <view>
        <transition name="slide">
          <view v-if="showInfo" class="backShadow" @click.self="closePopup">
            <view class="content" :class="{ 'slide-out': slideOut }" @click.stop>
              <view class="animated">
                <view class="info_app">
                  <view class="main">
                    <view class="fontSize" style="text-align: center;">供应商须知 </view>
                    
                    <view class="fontSize">1.申请合作主体非个体工商户，具备供应品类准入要求的经营资质。</view>
                    
                    <view class="fontSize">2.正在合作中或合作过的供应商无需再次申请，有需求请直接联系对应采购。</view>
                    
                    <view class="fontSize">3.请提供真实有效信息，虚假信息一经证实将纳入我司合作黑名单。</view>
                    
                    <view class="fontSize">4.朴朴将依据其内部管理规范，对申请合作的供应商进行全方面评估，并有权取消不合格供应商申请合作的资格。</view>
                    <view>
                      <view>
                        
                        <view class="fontSize"  >
                          <checkbox @click="handleCheckboxChange"   v-model="agreementChecked" class="uni-checkbox-input"></checkbox>
                          我已明确以上《供应商须知》并同意收集的信息可能用于后续的服务</view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="footer_app">
                  <button class="btn" @click="closePopup">不同意</button>
                  <button type="primary" class="btn next" @click="handlerAdopt">同意并继续</button>
                </view>
              </view>
            </view>
          </view>
        </transition>
      </view>


      <common_problem ref="popupComponent"></common_problem>

    </view>
  </template>
    
<script>
import common_problem from './components/common_problem.vue'
  export default {
    components:{
      common_problem
    },
    data() {
      return {
        showInfo: false,
        agreementChecked: false,
        slideOut: false,
        phone:'',
        steps: [
          {
            number: 1,
            title: "提报申请",
            description:
              "请重点展现合作商品的卖点和优势，会在众多申请中脱颖而出。提交后可在申请合作页面查看进度与结果。",
          },
          {
            number: 2,
            title: "初审",
            description:
              "朴朴将在1~3个工作日完成初审，若初审未通过则以短信通知，您可根据审核意见修改后重新提交。",
          },
          {
            number: 3,
            title: "复审",
            description:
              "初审通过后，朴朴将在1~3个工作日完成复审，结果将以短信通知。若有异议，可拨打181-2096-2781咨询。",
          },
          {
            number: 4,
            title: "洽谈",
            description:
              "复审通过后，朴朴将在1~3个工作日与您联系，洽谈合作相关事宜。请保持电话畅通。",
          },
          {
            number: 5,
            title: "签约",
            description: "洽谈成功后，双方签订合作协议，正式开始合作。",
          },
          
        ],
      };
    },

    onLoad(options) {
      this.phone = options.phone
    },
    methods: {
      handlerProblem(){
        this.$refs.popupComponent.handlerApply();
      },

      copyLink() {
        uni.setClipboardData({
					data: 'sems.pupumall.com', //你要复制的数据
					success: function() {
						uni.showToast({
							title: '复制成功'
						});
					}
				});
      },

      handlerApply() {
      this.showInfo = true;
      this.slideOut = false;
    },
    closePopup() {
      this.slideOut = true;
      setTimeout(() => {
        this.showInfo = false;
        this.slideOut = false;
      }, 500); 
    },
    handleCheckboxChange() {
      // 使用$nextTick()延迟更新agreementChecked的值
        this.agreementChecked = !this.agreementChecked;
        console.log(this.agreementChecked  , 'this.agreementChecked')
    },

      backHome() {
        uni.navigateBack();
      },
      //同意通过
      handlerAdopt(){
        console.log(this.agreementChecked )
        if(this.agreementChecked){
          console.log( this.phone  ,'1111111111')
          uni.navigateTo({
              url:'/pages/mer/tabbar/supplier/supplier_form?phone=' + this.phone,
          });
        }else{
 
          uni.showToast({
							title: '请先阅读并同意《供应商须知》',
              icon: 'none', 
              duration: 2000, 
              mask: true
						});
        }
      }
    },
  };
  </script>
    <style>
    @import "./supplier_application.scss";
  </style>
    <style scoped lang="scss">

    .fontSize{
      font-weight: bold;
    font-size: 16px;
    margin-bottom: 16rpx;
    }
  .steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .step {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding-left: 40px;
  }
  
  .step-number {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background-color: #4caf50;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-weight: bold; */
  }
  
  .step-content {
    margin-left: 10px;
  }
  
 
  
  .step-content p {
    margin: 5px 0 0 0;
    color: #666;
  }
  
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 30px;
    width: 2px;
    height: calc(100% - 10px);
    background-color: #4caf50;
  }
  
  .header {
    background-color: #4caf50;
    color: white;
    padding: 20px;
    text-align: center;
    margin-top: 170rpx;
  }
  
  .application {
    font-family: Arial, sans-serif;
    color: #333;
    overflow-y: scroll;
    height: 100vh;
  }
  
  .link-container {
    /* background-color: white; */
    color: white;
    border-radius: 20px;
    display: inline-block;
    padding: 5px 10px;
    font-size: 14px;
    margin-top: 10px;
    border: 1px solid white;
  }
  
  .info {
    background-color: #e5f4e3;
    padding: 20px;
    font-size: 14px;
    font-weight: bold;
  }
  
  .info a {
    color: #00a651;
  }
  
  .footer {
    background-color: white;
    border-top: 1px solid #e5e5e5;
    height: 80px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .icons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
  }
  
  .icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    // margin-right: 20px;
    flex: 1;

  }
  
  .icon text {
    font-size: 12px;
    margin-top: 5px;
  }
  
  .apply-button {
    background-color: #00a651;
    color: white;
    border: none;
    border-radius: 32px;
    cursor: pointer;
    width: 180px;
  }
  </style>